/* 后代组件通信 class */
import React from "react";
import './Vote.less';
import VoteMain from './VoteMain';
import VoteFooter from './VoteFooter';
import ThemeContext from "@/ThemeContext";


/*
*   1.  在src下创建公共的上下文对象
*   2. 基于 <....Provider value={对象}> 组件，储存要传递信息
*   3. 在后代组件中，获取存储信息
* */
class Vote extends React.Component {
    state = {
        supNum: 10,
        oppNum: 5
    }

    change = (type) => {
        let {supNum, oppNum} = this.state
        if (type === 'sup') {
            this.setState({
                supNum: supNum + 1
            })
            return
        }
        this.setState({
            oppNum: oppNum + 1
        })
    }

    render() {
        let {supNum, oppNum} = this.state
        return <ThemeContext.Provider value={{ // 往上下文中放最新的信息
            supNum: supNum,
            oppNum: oppNum,
            change: this.change
        }}>
            <div className="vote-box">
                <div className="header">
                    <h2 className="title">React是很棒的前端框架</h2>
                    <span className="num">0</span>
                </div>
                <VoteMain/>
                <VoteFooter/>
            </div>
            ;
        </ThemeContext.Provider>

    }
}

export default Vote;